<script setup>
import { getVideoList } from "@/stores/videolist.js"
import { MYURL } from '@/utils/express/express.js'
import Vrouter from "@/router"
const videoList = getVideoList()
const router = Vrouter
</script>

<template>
    <div class="videos">
        <div class="back-ground"></div>
        <div class="video" v-for="(person) in videoList.videosList" @click="router.push(`videodetail?id=${person.id}`)"
            :key="person.id">
            <div class="nav_img">
                <img class="video-image" :src="MYURL + '/public/videoimages/' + person.image" loading="lazy">
                <!-- <p class="video_time">00:24</p> -->
            </div>
            <div class="video-bottom">
                <div class="video-title-width">
                    <p class="video-title">{{ person.title }}</p>
                </div>
                <div class="video-author">
                    <div class="video-author-logo">
                        <img src="@/assets/img/up.png">
                        <p @click.stop="router.push(`/personal?up=${person.up}`)">{{ person.username }}</p>
                    </div>
                    <img src="@/assets/img/more.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>   .nav_img {
       position: relative;

       img {
           margin-top: 5px;
           width: 100%;
           border-radius: 6px;
       }

       .video_time {
           position: absolute;
           right: 2%;
           bottom: 5%;
           font-size: 11px;
           line-height: 15px;
           border-radius: 3px;
           padding: 0 5px;
           color: rgba(255, 255, 255, 0.9);
           background-color: rgba(0, 0, 0, .2);
       }
   }


   .videos {
       padding: 0 5px;
       display: flex;
       flex-wrap: wrap;
       margin: 10px auto;
       display: grid;
       // grid-template-columns: 1fr 1fr;
       grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
       gap: 1% 2%;
   }


   .video {
       // width: 48%;
       background-color: white;
       border-radius: 5px;
   }

   .video-image {
       border-radius: 5px 5px 0 0;
       width: 100%;
       height: 18vh;
       object-fit: cover;
       background-image: url('../../assets/gif/bilibili.gif');
       background-size: 100%;
   }

   .video-bottom {

       padding: 10px;
       width: 100%;
       display: flex;
       flex-direction: column;
       overflow: hidden;
   }

   .video-title-width {
       height: 40px;
   }

   .video-title {
       color: #18191b;
       width: 100%;
       font-size: 14px;
       word-break: break-all;
       overflow: hidden;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;

   }

   .video-author {
       margin-top: 5px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 10px;
       color: #95999f;
       font-size: 14px;
       width: 100%;

       .video-author-logo {
           display: flex;
           gap: 5px;
           align-items: center;
           width: 80%;

           img {
               width: 15px;
           }

           p {
               width: 100%;
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
               font-size: 11px;
           }
       }

       img {
           width: 12%;

       }
   }

   @media screen and (min-width: 768px) {
       .videos {
           margin-top: 39px;
           grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
       }
   }

   @media screen and (min-width: 992px) {
       .videos {
           margin-top: 50px;
           grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
       }
   }
</style>
